<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisble" :before-close="handleClose" :close-on-click-modal=false
               width="1000px" @open="caseConfigList">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
        <div class="search">
          <el-form-item label="配置名称" prop="name">
            <el-input v-model.trim="queryParams.name" placeholder="请输入配置名称搜索" clearable/>
          </el-form-item>
          <el-form-item label="配置描述" prop="description">
            <el-input v-model.trim="queryParams.description" placeholder="请输入配置描述搜索" clearable/>
          </el-form-item>
          <el-form-item label="创建人" prop="createUser">
            <el-input v-model.trim="queryParams.createUser" placeholder="请输入创建人名称搜索" clearable/>
          </el-form-item>
        </div>
        <div class="search" style="margin-bottom: 20px">
          <el-button type="primary" @click="caseConfigList" icon="el-icon-search">查询</el-button>
          <el-button @click="refresh('queryForm')" icon="el-icon-refresh">重置</el-button>
        </div>
      </el-form>
      <el-table :data="tables" max-height="290">
        <el-table-column property="name" label="配置名称" show-overflow-tooltip></el-table-column>
        <el-table-column property="description" label="描述信息" show-overflow-tooltip></el-table-column>
        <el-table-column property="createUser" label="创建人" show-overflow-tooltip width="150px"></el-table-column>
        <el-table-column property="createTime" label="创建时间" width="150px"></el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="scope">
            <el-button type="text" @click="use(scope.row)">引用</el-button>
            <el-popconfirm
              @onConfirm="del(scope.row)"
              confirm-button-text='确定'
              cancel-button-text='我点错了'
              icon="el-icon-info"
              icon-color="red"
              title="确定要删除该配置吗？"
            >
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
<!--      <div slot="footer" class="dialog-footer" style="">-->
<!--        <el-button type="primary" @click="handleClose">关 闭</el-button>-->
<!--      </div>-->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageRow"
        layout="total, prev, pager, next"
        :hide-on-single-page="value"
        @pagination="caseConfigList"
      />
    </el-dialog>
  </div>

</template>

<script>
import Pagination from '@/components/Pagination/index'

export default {
  name: "listDialog",
  props: ["dialogVisble", "operateId"],
  components: {Pagination},
  data() {
    return {
      title: "引用配置",
      totalCount: 0,
      queryParams: {
        name: "",
        createUser: "",
        description: "",
        userId: this.$store.getters.userId

      },
      query: {
        pageRow: 10,
        pageNum: 1
      },
      value: false,
      total: 0,
      tables: []
    }
  },
  methods: {
    handleClose() {
      this.$emit("closeDialog")
    },
    caseConfigList() {
      this.query = {...this.query, ...this.queryParams}
      this.query["operateId"] = this.operateId
      this.api({url: "/getCaseConfigList", method: "post", data: this.query}).then(resp => {
        this.total = resp.totalCount
        this.tables = resp.list
      })
    },
    refresh(queryForm) {
      this.$refs[queryForm].resetFields();
      this.caseConfigList();
    },
    del(data) {
      console.log(data)
      this.api({url: `/deleteCaseConfig/${data.id}`, method: "delete"}).then((resp) => {
        this.caseConfigList()
        this.$message({message: resp, type: 'success'});
      })
    },
    use(data) {
      this.$emit("updateForm", data)
      this.handleClose()
      this.$message({message: "引用成功", type: 'success'})
    },
  },
}
</script>

<style scoped>
.search {
  margin: auto;
  text-align: center
}

</style>
